<!--  记得import .js中自定义的方法-->

<template>
  <div>

    <!--对话框    添加和更新用的 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%">    <!--  dialogFormVisible是自定义的弹窗名  -->
      <el-form :model="nrplgl" :rules="nrplglRules" ref="nrplglRulesForm">    <!--  ref下面有引用的  -->

        <el-form-item label="文章标题" prop="title" label-width="100px">
          <el-input v-model="nrplgl.title" autocomplete="off" style="width:500px" placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>

        <el-form-item label="发布渠道" prop="channel" label-width="100px">
          <el-input v-model="nrplgl.channel" autocomplete="off" style="width:500px" placeholder="请输入发布渠道"
          ></el-input>
        </el-form-item>

        <el-form-item label="发布频道" prop="channel2" label-width="100px">
          <el-input v-model="nrplgl.channel2" autocomplete="off" style="width:500px" placeholder="请输入发布频道"
          ></el-input>
        </el-form-item>

        <el-form-item label="文章类型" prop="type" label-width="100px">
          <el-input v-model="nrplgl.type" autocomplete="off" style="width:500px" placeholder="请输入文章类型"
          ></el-input>
        </el-form-item>

        <el-form-item label="关键词" prop="key1" label-width="100px">
          <el-input v-model="nrplgl.key1" autocomplete="off" style="width:500px" placeholder="请输入关键词"></el-input>
        </el-form-item>
        <el-form-item label="发布人" prop="publisher" label-width="100px">
          <el-input v-model="nrplgl.publisher" autocomplete="off" style="width:500px" placeholder="请输入发布人名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="发送时间" prop="time" label-width="100px">
          <el-date-picker
            v-model="nrplgl.time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期和时间"
            style="width:500px"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="文章内容" prop="content" label-width="100px">
          <el-input v-model="nrplgl.content" autocomplete="off" style="width:500px" placeholder="请输入文章内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="图片" prop="image" label-width="100px">
          <el-input v-model="nrplgl.image" autocomplete="off" style="width:498px; display: none; "></el-input>

          <el-upload
            class="upload-demo"
            drag
            action=""
            accept=".jpg,.jpeg,.jpe,.png,.bmp,.gif,.webp,.svg,.ico,.tif,.tiff "
            :http-request="uploadFile"
            :on-change="handleChange"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传图片类文件，且大小不超过1MB</div>
          </el-upload>

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse('nrplglRulesForm')" v-show="title === '编辑文章'">确认保存
        </el-button>
        <el-button type="primary" @click="addCourse('nrplglRulesForm')" v-show="title === '新增文章'">确认添加
        </el-button>
      </div>
    </el-dialog>


    <!--    上方按钮行-->
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
      <!-- 最后加的keyword和searchForm -->
      <div style="font-size: 36px; font-family: 'LiSu'; margin-top: 6px; margin-left: 30px"></div>
      <br>

      <el-form-item label="1、" style="margin-top: 3px; margin-left: 30px">
        <el-button type="primary" size="small" @click="openAddDialog" icon="el-icon-plus"
                   style="margin-right: 30px; margin-top: 6px"
        >新增文章
        </el-button>

        <el-button type="danger" size="small" @click="delBatch" icon="el-icon-delete"
                   style="margin-left: 30px; margin-top: 3px"
        >批量删除
        </el-button>

      </el-form-item>


      <br>

      <el-form-item label="2、" prop="courseName" style="margin-top: 3px; margin-left: 30px">
        <!--    clearable    输入框的右侧会显示一个清除按钮（通常是一个小图标）-->
        <el-input size="small" clearable v-model="keyword.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>

      <el-form-item>

        <el-button type="primary" size="small" @click="search" icon="el-icon-search"
                   style="margin-top: 6px;margin-left: 30px;background-color: green"
        >查询
        </el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')" icon="el-icon-refresh"
                   style="margin-top: 6px"
        >重置
        </el-button>
      </el-form-item>

    </el-form>


    <!-- 中间行数据栏 -->
    <el-table v-loading="loading" :data="publishList" class="styled-table" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="25" align="center"/>
      <el-table-column label="文章标题" align="center" prop="title" :width="200"/>
      <el-table-column label="发布渠道" align="center" prop="channel" :width="200"/>
      <el-table-column label="发布频道" align="center" prop="channel2" :width="200"/>
      <el-table-column label="文章类型" align="center" prop="type" :width="200"/>
      <el-table-column label="关键词" align="center" prop="key1" :width="200"/>
      <el-table-column label="评论数" align="center" prop="number" :width="200"/>
      <el-table-column label="最近评论时间" align="center" prop="time2" :width="200"/>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">  <!-- 操作栏 -->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="opennrplglxqThisPage(scope.$index, scope.row)"
          >查看文章
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
          >查看评论
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,8,10,200]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" class="Hulboy2"
      style="margin-left: 450px; margin-top: 20px"
    >
    </el-pagination>
    <!--    :page-size="100"貌似是一个必须的占用符 可以为null-->
  </div>
</template>


<script>
import row from 'element-ui/packages/row'
// /////////////////      ///////////////////////////////////////
import { addWz, delBatch, deleteById, edit, getList, uploadPicture } from '@/api/nrplgl'
import { mapGetters } from 'vuex'

export default {
  computed: {
    row() {
      return row
    },
    ...mapGetters([
      'name'
    ])
  },

  methods: {
    fetchData() { // 获取数据
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        title: this.keyword.title     // 模糊查询用的
        // status: this.keyword.status,
        // measureName: this.keyword.measureName,
      }
      console.log(params)
      // getList是api/unit.js中自己
      getList(params).then(res => {
        let pageInfo = res.data
        console.log('pageInfo', pageInfo)
        this.loading = false
        this.publishList = pageInfo.list
        // console.log("====>",this.payList)
        // list就是pageInfo中含所有属性的对象的集合
        //   对象的集合
        this.total = pageInfo.total
        console.log('使用以上参数,findAll查到共', this.total, '条数据')    // 打印总行数(不分页)

      })
    },

    openAddDialogInNewTab() {
      // const path = '/example/xz'; // 你的添加课程页面路由(修改为与你的路由配置中相匹配的路径 )
      const path = '/example/xz' // 你的添加课程页面路由(修改为与你的路由配置中相匹配的路径 )
      window.open(this.$router.resolve(path).href, '_blank')
      // _blank 参数和 window.open 调用，是用于在新窗口或新标签页，
      // Vue Router 提供了更适用于单页面应用（SPA）的导航方式。
    },
    opennrplglxqThisPage(a, b) {
      // 使用 Vue Router 的 push 方法在当前页面跳转
      // this.$router.push('/example/xz');
      this.$router.push({
        name: 'Nrplglxq',
        // 确保你在传递数据时进行适当的编码，例如使用 encodeURIComponent。
        query: { index520: encodeURIComponent(JSON.stringify(a)), data520: b }
      })
    },

    openAddDialogInThisPage2() {
      // 使用 Vue Router 的 push 方法在当前页面跳转
      this.$router.push('/xz2')
    },

    fetchData2() { // 严格查找课程名称
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        courseName: this.selectCourse.courseName
        // status: this.keyword.status,
        // measureName: this.keyword.measureName,
      }
      console.log('传参了吗？', params)
      // getList是api/unit.js中自己
      return getList2(params).then(res => {
        let pageInfo = res.data
        // console.log("pageInfo", pageInfo)
        this.loading = false
        this.publishList = pageInfo.list
        // console.log("====>",this.payList)
        // list就是pageInfo中含所有属性的对象的集合
        //   对象的集合
        this.total = pageInfo.total
        console.log('使用以上参数,findAll2查到共', this.total, '条数据')    // 打印总行数(不分页)
        return this.total
      })
    },

    /**  管理当前选课用的  */
    fetchData3() {
      // 组装查询参数
      let params = {
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
        cid: this.cid
      }
      console.log('传参了吗？', params)
      // getList是api/unit.js中自己

      getList3(params).then(res => {
        if (res.code == 20000) {
          this.loading = false
          this.publishList2 = res.data.list
          console.log('courseList2courseList2', this.publishList2)
          this.pageNum2 = res.data.pageNum
          this.total2 = res.data.total
        } else {
          this.$message({
            type: 'error',
            message: '查询失败',
            duration: 1000
          })
        }
        console.log('使用以上参数,findAll2查到共', this.total, '条数据')    // 打印总行数(不分页)
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },

    handleSizeChange2(val) {
      this.pageSize2 = val
      this.fetchData3()
    },
    handleCurrentChange2(val) {
      this.pageNum2 = val
      this.fetchData3()
    },

    //   模糊搜索
    search() {
      this.pageNum = 1
      this.fetchData()
    },

    // 打开添加对话框
    openAddDialog() {
      this.title = '新增文章'
      this.dialogFormVisible = true
    },
    // 另一个对话框
    manage(row) {
      this.selectCourse = row
      this.dialogFormVisible2 = true
      this.cid = this.selectCourse.courseNo
      this.fetchData3()
    },

    addCourse(formName) {
      this.$refs[formName].validate((valid) => {     // valid是个布尔值, => 后面是提交表格校验返回true时向后执行的代码
        if (valid) {
          // 上面是校验通过
          // 此处执行添加
          // console.log("添加status", this.selectCourse)

          // 不重复，才往里执行
          if (this.title === '新增文章') {
            addWz(this.nrplgl).then(res => {
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.fetchData()
              this.$refs[formName].resetFields()
            })
          } else if (this.title === '编辑文章') {
            edit(this.nrplgl).then(res => {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.fetchData()
              this.$refs[formName].resetFields()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
        this.dialogFormVisible = false
      })
    },

    handleUpdate(a, b) {
      // console.log(a, b);
      console.log('打印a（本页行下标）', a)
      console.log('打印b（整行数据）', b)
      this.title = '编辑文章'
      this.nrplgl = b   // 回显
      this.dialogFormVisible = true
    },

    // ID删除
    handleDelete(row) {
      console.log('接收到选中的id为' + row)
      this.$confirm('是否确认删除序号为' + row.id + '的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发请求
        let params = {
          id: row.id
        }
        deleteById(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 1000
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000
        })
      })
    },

    //   重置表单
    resetSearchForm(formName) {
      this.$refs[formName].resetFields()
      this.keyword.title = null
      this.fetchData()
    },

    // 多选框选中数据
    handleSelectionChange(selectionRowArr) {
      this.ids = []
      // 选项行（选中改变得到选中的这一行数据）
      // console.log("装着n个对象的数组: ", selectionRowArr)
      // 数组里面还是数组
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].id)
        // selectionRow[i].planNumber // 元素.对象
        // 要拿这个.id去删除的，就不要乱改了
      }
      // console.log("看看ids数组: (数字数组)", this.ids)
      // 该方法至此完成任务
    },

    // 批量删除
    delBatch() {
      this.$confirm('是否确认删除id为' + this.ids + '的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发请求
        let idStr = this.ids.join(',')
        // 这行代码的目的是将this.ids数组中的所有元素转换成一个由逗号分隔的字符串
        // 例如，如果this.ids是[1, 2, 3]，那么执行这行代码后，idStr的值将会是"1,2,3"。
        // console.log("收到字符串idStr", idStr)
        let params = {
          ids: idStr
        }
        delBatch(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 500
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 500
        })
      })
    },

    // 文件上传
    // 文件上传
    handleChange(file){
      // 获得你上传的文件，赋值给前面这个this.file对象
      this.file = file.raw;
    },
    uploadFile(){
      const file = this.file;
      const formData = new FormData();
      formData.append("file", file); // 由后端接口决定,后端参数叫file
      uploadPicture(formData).then((res) => {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.fileSrc = res.data
        this.nrplgl.image = res.data
        console.log("fileSrc",this.fileSrc)
      });
    },

  },
  name: 'SelectCourse',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 单位表格数据
      publishList: [],
      courseList2: [],
      // 上面对应的this.courseList = pageInfo.list;  别忘了改，否则不显示
      pageNum: 1,     // 使刚进去时看到的是：查找完的第“几”页数据
      pageSize: 5,    // 这个数一定要和:page-sizes="[6,8,10,200]"中的第一个显示条目一样，否则丢失数据总数
      currentPage: 1, // 决定刚进去时显示选中第“几”页的页码，注意一定要currentPage == pageNum，否则二者显示的关系不对应
      total: 0,
      hideSerialNumber: true, // 设置为 true 以隐藏“序号”列
      pageNum2: 1,     // 使刚进去时看到的是：查找完的第“几”页数据
      pageSize2: 3,    // 这个数一定要和:page-sizes="[6,8,10,200]"中的第一个显示条目一样，否则丢失数据总数
      currentPage2: 1, // 决定刚进去时显示选中第“几”页的页码，注意一定要currentPage == pageNum，否则二者显示的关系不对应
      total2: 0,

      cid: '',

      ids: [],
      keyword: {
        courseNo: null,
        title: null
        // status: null,
        // measureName: null,
      },
      title: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      // inputValue: '',  // 在data()中声明inputValue，用于存储<el-autocomplete>的输入值
      // restaurants: [],
      // state1: '',
      // state2: '',
      nrplgl: {
        id: null,
        title: null,
        channel: null,
        channel2: null,
        type: null,
        key1: null,
        publisher: null,
        time: null,
        content: null,
        image: null,
        number: null,
        time2: null,


        //   写不写scope.row都能获得整行数据，包括未显示的
      },

      nrplglRules: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        channel: [
          { required: true, message: '发布渠道不能为空', trigger: 'blur' }
        ],
        channel2: [
          { required: true, message: '发布频道不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '文章类型不能为空', trigger: 'blur' }
        ],
        key1: [
          { required: true, message: '关键词不能为空', trigger: 'blur' }
        ],
        publisher: [
          { required: true, message: '发布人不能为空', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    this.fetchData()
  }
}
</script>


<style> // 中间数据表格的样式
.styled-table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 使表格宽度填满容器 */
}

.styled-table th, .styled-table td {
//border: 0.2px solid #409EFF; /* 横竖边框颜色   开始1px*/ border: 0.2px solid #000000; /* 横竖边框颜色   开始1px*/ padding: 12px; /* 单元格内边距    开始12px*/ text-align: center; /* 内容居中对齐 */
}

.styled-table th {
//background-color: #f4f4f5; /* 表头背景色 */ background-color: #eeeeee; /* 表头背景色 */ font-weight: bold; /* 表头字体加粗 */
}
</style>
